<template>
    <el-dialog v-model="dialogVisible" title="课堂签到" width="400px" :close-on-click-modal="false" :show-close="true"
        @close="handleClose" class="student-sign-in-form">
        <div class="sign-in-content">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" label-position="left">
                <el-form-item label="签到码" prop="inputCode">
                    <el-input v-model="form.inputCode" placeholder="请输入签到码" maxlength="6" :show-password="true" />
                </el-form-item>
            </el-form>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确认签到</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    signId: {
        type: Number,
        required: true
    },
    signCode: {
        type: String,
        required: true
    },
    studentId: {
        type: [String, Number],
        required: true
    },
    classroomId: {
        type: [String, Number],
    },
    startTime: {
        type: Number,
        required: true
    },
    endType: {
        type: Number,
        required: true
    },
    sendMessage: {
        type: Function,
        required: true
    }
})

const emit = defineEmits(['close'])
const dialogVisible = ref(true)
const formRef = ref(null)

const form = ref({
    inputCode: ''
})

const rules = {
    inputCode: [
        { required: true, message: '请输入签到码', trigger: 'blur' },
        { min: 3, max: 6, message: '签到码长度在3到6个字符之间', trigger: 'blur' }
    ]
}

const handleClose = () => {
    emit('close')
}

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()

        // 检查是否超时
        const currentTime = new Date().getTime()
        const elapsedTime = (currentTime - props.startTime) / 1000 / 60 // 转换为分钟

        // 如果设置了时间限制（不是手动关闭）且已超时
        if (props.endType !== 0 && elapsedTime > props.endType) {
            ElMessage.error('签到已超时')
            handleClose()
            return
        }

        // 验证签到码是否正确
        if (form.value.inputCode !== props.signCode) {
            ElMessage.error('签到码错误，请重新输入')
            return
        }

        // 发送签到消息
        props.sendMessage({
            type: 'STUDENT_SIGN_IN',
            data: {
                signId: props.signId,
                userId: props.studentId,
                signStatus: '已签到'
            }
        })

        ElMessage.success('签到成功')
        handleClose()
    } catch (error) {
        console.error('表单验证失败:', error)
    }
}
</script>

<style scoped>
.student-sign-in-form {
    :deep(.el-dialog) {
        background-color: white;
        border-radius: 8px;
    }

    :deep(.el-dialog__header) {
        margin: 0;
        padding: 16px 20px;
        border-bottom: 1px solid #eee;
    }

    :deep(.el-dialog__body) {
        padding: 20px;
    }
}

.sign-in-content {
    padding: 20px 0;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 20px;
    border-top: 1px solid #eee;
}
</style>